<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>链上善行大数据监控平台</title>
    <script type="text/javascript" src="../blockchain-kindness/bigdata/js/jquery.js"></script>
    <script type="text/javascript" src="../blockchain-kindness/bigdata/js/echarts.min.js"></script>
    <script type="text/javascript" src="../blockchain-kindness/bigdata/js/china.js"></script>
    <script type="text/javascript" src="../blockchain-kindness/bigdata/js/map.js"></script>
    <script type="text/javascript" src="../blockchain-kindness/bigdata/js/js.js"></script>
    <script type="text/javascript" src="../blockchain-kindness/bigdata/js/Bubble.js"></script>
    <link rel="stylesheet" href="../blockchain-kindness/bigdata/css/style.css">
    <script type="text/javascript">
        let donations = []
        const pageSize = 5;
        let currentPage = 0;
        let totalNum = []
        let projectDetail = []
        let totalDisbuse
        let totalDonation
        let totalNewUser
        const getDonations = async () => {
            const res = await fetch('/blockchain-kindness/donations/getDonationsPage').then(response => response.json()).then(data => donations = data.data)
            const res1 = await fetch('/blockchain-kindness/donations/getTotalNumberOfUsers').then(response => response.json()).then(data => totalNum = data.data)
            const res2 = await fetch('/blockchain-kindness/donations/getProjectStage').then(response => response.json()).then(data => projectDetail = data.data)
            const res3 = await fetch('/blockchain-kindness/donations/getMiscellany').then(response => response.json()).then(data => projectDetail = data.data)
            const res4 = await fetch('/blockchain-kindness/disburse/getTotalDisburse').then(response => response.json()).then(data => totalDisbuse = data.data)
            const res5 = await fetch('/blockchain-kindness/donations/getDonations').then(response => response.json()).then(data => totalDonation = data.data)
            const res6 = await fetch('/blockchain-kindness/getYearNewTotalUser').then(response => response.json()).then(data => totalNewUser = data.data)
            const inputField = document.getElementById('totol_num');
            const inputField1 = document.getElementById('male_num');
            const inputField2 = document.getElementById('female_num');
            const inputField3 = document.getElementById('endProject');
            const inputField4 = document.getElementById('endRatio')
            const inputField5 = document.getElementById('comment')
            const inputField6 = document.getElementById('article')
            const inputField7 = document.getElementById('project')
            const inputField8 = document.getElementById('user')
            const inputField9 = document.getElementById('amount')
            const inputFile10 = document.getElementById('totalDisburse')
            const inputFile11 = document.getElementById('totalDonation')
            const inputFile12 = document.getElementById('totalNewUser')
            inputField.innerText = res1.totalNum;
            inputField1.innerText = res1.maleNum;
            inputField2.innerText = res1.femaleNum;
            inputField3.innerText = res2.结束项目;
            inputField4.innerText = res2.完成占比 + "%"
            inputField5.innerText = res3.commentNum;
            inputField6.innerText = res3.postNum;
            inputField7.innerText = res3.newProjectNum;
            inputField8.innerText = res3.newUserNum;
            inputField9.innerText = res3.newDonationNum
            inputFile10.innerText = totalDisbuse
            inputFile11.innerText = totalDonation
            inputFile12.innerText = totalNewUser
            donations = donations.map(item => ({
                projectName: item.projectName,
                username: item.username,
                createTime: item.createTime.split(' ')[0],
                amount: item.amount
            }));
            console.log(donations)
            async function updateTable(){
                const tbody = document.querySelector(".table1 tbody");
                tbody.innerHTML = '                        <tr>\n' +
                    '                            <th>公益项目</th>\n' +
                    '                            <th>捐款人</th>\n' +
                    '                            <th>捐款时间</th>\n' +
                    '                            <th>捐款金额</th>\n' +
                    '                        </tr>';
                const startIndex = currentPage * pageSize;
                const endIndex = startIndex + pageSize;
                const currentRows = donations.slice(startIndex, endIndex);
                currentRows.forEach(row => {
                    const tr = document.createElement("tr");
                    tr.innerHTML = `
                        <td>${row.projectName}</td>
                        <td>${row.username}</td>
                        <td><span>${row.createTime}</span></td>
                        <td><span>${row.amount}</span></td>
                    `;
                    tbody.appendChild(tr);
                });
                currentPage = (currentPage + 1) % Math.ceil(donations.length / pageSize);
            }
            setInterval(updateTable, 1000);
            updateTable()
        }
        getDonations()
    </script>
</head>
<body>
<div class="head clearfix">

    <h1 class="pulll_left">链上善行大数据监控平台</h1>
<!--     此部分内容为大屏分块所取-->
    <div class="menu menu2 pulll_left">
        <ul>
            <li><a href="/blockchain-kindness/">主页</a></li>
            <li><a href="/blockchain-kindness/projects">公益项目</a></li>
            <li><a href="/blockchain-kindness/activities">平台活动</a></li>
            <li><a href="/blockchain-kindness/articles">爱心广场</a></li>
        </ul>
    </div>

    <div class="time" id="showTime">2018/6/12 17:00:12</div>
    <script>
        var t = null;
        t = setTimeout(time,1000);//開始运行
        function time()
        {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y=dt.getFullYear();
            var mt=dt.getMonth()+1;
            var day=dt.getDate();
            var h=dt.getHours();//获取时
            var m=dt.getMinutes();//获取分
            var s=dt.getSeconds();//获取秒
            document.getElementById("showTime").innerHTML = y+"/"+mt+"/"+day+" "+h+":"+m+":"+s+"";
            t = setTimeout(time,1000); //设定定时器，循环运行
        }

    </script>
</div>
<div class="mainbox">
    <ul class="clearfix nav1">
        <li style="width: 22%">
            <div class="box">
                <div class="tit">用户捐款</div>
                <div class="boxnav" style="height: 200px;">
                    <table class="table1" id="mytable" width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tbody>
                        <tr>
                            <th>公益项目</th>
                            <th>捐款人</th>
                            <th>捐款时间</th>
                            <th>捐款金额</th>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="box">
                <div class="tit">本周事项</div>
                <div class="boxnav" style="height: 250px;">
                    <div class="" style="height: 190px" id="echart1"></div>
                    <div class="leidanav">
                        <ul class="clearfix">
                            <li><span>评论</span><p id="comment"></p></li>
                            <li><span>发帖</span><p id="article"></p></li>
                            <li><span>新项目</span><p id="project"></p></li>
                            <li><span>新增用户</span><p id="user"></p></li>
                            <li><span>获捐次数</span><p id="amount"></p></li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li style="width: 56%">

            <div class="box">
                <div class="boxnav mapc" style="height: 550px; position: relative">
                    <div class="mapnav">
                        <ul>
                            <li><div><span>2024总获赠</span><p id="totalDonation"></p></div></li>
                            <li><div><span>2024总支出</span><p id="totalDisburse"></p></div></li>
                            <li><div><span>年新增用户数</span><p id="totalNewUser"></p></div></li>
                        </ul>
                    </div>
                    <div class="mapnav2">

                        <div class="">
                            <div class="" style="height: 130px;">
                            </div>

                        </div>
                    </div>
                    <div class="map" id="map"></div>

                    <script>
                        $(".mapbtn a").hover(function(){
                            var ind=$(this).index()
                            $(".mapnav ul").eq(ind).show().siblings().hide()
                        })
                    </script>
                </div>
            </div>

        </li>
        <li style="width: 22%">

            <div class="box">
                <div class="tit">用户满意度</div>
                <div class="boxnav" id="echart3" style="height: 200px;">

                </div>
            </div>
            <div class="box">
                <div class="tit">热门公益</div>
                <div class="boxnav" style="height: 250px;">
                    <div style="height: 200px; float: left; width: 40%; padding: 0 5px;">
                        <div class="tit02 text-b">公益热度榜</div>
                        <div class="huati">
                            <ul>
                                <li>1.奉献之爱  <span class="text-s">↑2167</span></li>
                                <li>2.知识铸就未来     <span class="text-s">↑2167</span></li>
                                <li>3.光明未来   <span class="text-d">↓2167</span></li>
                                <li>4.点燃师者之心   <span class="text-d">↓2167</span></li>
                                <li>5.水保护      <span class="text-d">↓2167</span></li>
                            </ul>
                        </div>
                    </div>

                    <div style="height: 200px; float: left; width: 60%">

                        <div class="text-b tit02" style="text-align: center;">关键词 — 云</div>
                        <div class="tagcloud">
                            <!-- bo大小 co颜色 -->
                            <a class="b01 co01" href="/blockchain-kindness/project?id=119">奉献之爱</a>
                            <a class="b02 co02" href="/blockchain-kindness/project?id=114">知识铸就未来</a>
                            <a class="b03 co05" href="/blockchain-kindness/project?id=108">光明未来</a>
                            <a class="b04 co02" href="/blockchain-kindness/project?id=113">点燃师者之心</a>
                            <a class="b03 co05" href="/blockchain-kindness/project?id=101">水保护</a>
                        </div>
                        <script type="text/javascript">
                            /*3D标签云*/
                            tagcloud({
                                selector: ".tagcloud",  //元素选择器
                                fontsize: 6,       //基本字体大小, 单位px
                                radius: 40,         //滚动半径, 单位px 页面宽度和高度的五分之一
                                mspeed: "slow",   //滚动最大速度, 取值: slow, normal(默认), fast
                                ispeed: "slow",   //滚动初速度, 取值: slow, normal(默认), fast
                                direction: 0,     //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
                                keep: false          //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
                            });
                        </script>
                    </div>
                </div>
            </div>

        </li>
    </ul>

    <div class="box" style="padding: 20px 0;">
        <ul class="clearfix nav2 ">
            <li style="width:25%"><div class="tit01">人数权重</div>
                <div class="">
                    <div style="float: left; width: 50%; height: 170px" id="fb01"></div>
                    <div style="float: left; width: 50%; height: 170px"  id="fb02"></div>
                </div>
                <div class="leidanav leidanav2">
                    <ul class="clearfix">
                        <li><span>总人数</span><p id="totol_num">128</p></li>
                        <li><span>男</span><p id="male_num">100</p></li>
                        <li><span>女</span><p id="female_num">28</p></li>
                    </ul>
                </div>
            </li>
            <li style="width:25%"><div class="tit01">趋势比较</div>
                <div class="ftechart" id="echart4"></div>
            </li>
            <li style="width:25%"><div class="tit01">公益完项</div>
                <div class="" style="height:100%;display: flex; align-items: center;">
                    <div style="float: left; width: 50%; height: 100%" class="wancheng">
                        <div><span>已完成项目</span>
                            <h3><span id="endProject"></span><i>个</i></h3></div>
                        <div class="yuan">
                            <span id="endRatio"></span>
                        </div>
                    </div>
                    <div style="float: left; width: 50%; height: 50%" id="myd1"></div>



                </div>

            </li>
            <li style="width:25%"><div class="tit01">公益分类</div>

                <div class="" id="">
                    <div style="float: left; width: 50%; height: 200px" id="fb03"></div>
                    <div style="float: left; width: 50%; height: 200px"  id="fb04"></div>

                </div>

            </li>
        </ul>
    </div>


</div>
</body>
</html>
